<template>
    <div class="SSZ">
        <header>
            <van-nav-bar
            title="设置"
            left-arrow
            
            />
            <div class="Svan"> 
            <van-nav-bar title="个人信息" >
            <van-icon name="arrow" slot="right" />
            </van-nav-bar>
            </div>
            <div class="S1van"> 
            <van-nav-bar title="收货地址" >
            <van-icon name="arrow" slot="right" />
            </van-nav-bar>
            </div>
            <div class="S2van"> 
            <van-nav-bar title="申请认证" >
            <van-icon name="arrow" slot="right" />
            </van-nav-bar>
            </div>
            <div class="S3van"> 
            <van-nav-bar title="消息提醒">
            </van-nav-bar>
            <van-switch v-model="checked" 
            class="SAN" @input='SAN'
            size="20px"
            />
            </div>
            <div class="S4van"> 
            <van-nav-bar title="清除缓存" >
            <van-icon name="arrow" slot="right" />
            </van-nav-bar>
            </div>
            <van-nav-bar title="帮助中心" class="Sssk">
            <van-icon name="arrow" slot="right" />
            </van-nav-bar>
            <van-nav-bar title="奢侈二手交易用户协议" class="Sssk1">
            <van-icon name="arrow" slot="right" />
            </van-nav-bar>
            <van-nav-bar title="关于奢侈二手交易(V3.7.1)" class="Sssk2">
            <van-icon name="arrow" slot="right" />
            </van-nav-bar>
            <van-nav-bar title="个人信息" class="Sssk3">
            <van-icon name="arrow" slot="right" />
            </van-nav-bar>
            
        </header>

        <section>

        </section>

        <footer>
             <div>
                 <button class="SBN">退出登录</button>
            </div>   
        </footer>
    </div>
</template>

<script>
export default {
  data() {
    return {
      checked: '',
    };
  },
  methods:{
      SAN(checked){
          if(checked){ 
            alert('已开启消息提醒')
          }else{
            alert('已关闭消息提醒')
          }
      }
  }

}

</script>


<style scoped>
*{
    margin: 0;
    padding: 0;
}
.SSZ{
    display: flex;
    height: 100vh;
    flex-direction: column;
    font-size: 0.12rem;
}
header,footer{
    height:0.8rem; 
}
section{
    flex:1;
    overflow:auto;
}
.Svan .van-nav-bar__title{
    margin: 0;
    
}
.S1van .van-nav-bar__title{
    margin: 0;  
}
.S4van .van-nav-bar__title{
    margin-left: -3rem;
    float: left;  
}
.S2van .van-nav-bar__title{
    margin: 0;
}
.S3van .van-nav-bar__title{
    margin: 0;
    float: left;
}
.SAN{
    float: right;
    margin-top: 0.23rem
}
.Sssk{
    margin-left: -6rem;
    border-bottom: 1px solid #ccc;
}
.Sssk1{
    margin-left: -3.7rem;
    border-bottom: 1px solid #ccc;
}
.Sssk2{
    margin-left: -3rem;
    border-bottom: 1px solid #ccc;
}
.Sssk3{
    margin-left: -6rem;
    border-bottom: 1px solid #ccc;
}
.S3van{
height: 1rem;
}

.S3van .van-nav-bar{
    width: 3rem;
    float: left;
}
.van-icon-arrow-left:before{
    color: #000;
    font-size: 0.5rem;
}
.van-icon-arrow:before{
    color: #000;
    font-size: 0.5rem;
}
.Svan .van-nav-bar{
    border-bottom: 0.01rem solid #000;
    text-align: left;
}
.S1van .van-nav-bar{
    border-bottom: 0.01rem solid #ccc;
    text-align: left;
}
.S2van .van-nav-bar{
    text-align: left;
}
.S3van .van-nav-bar{
    text-align: left;
   
}
.S3van .van-switch--on{
    float:right;
    margin-top: 0.23rem;
}
.S4van .van-nav-bar{
    border-bottom: 0.01rem solid #000;
    border-top: 0.01rem solid #ccc;
    text-align: left;
}
footer div{
    width: 3rem;
    height: 0.8rem;
    margin: 0 auto;
    font-size: 0.4rem;
}
.SBN{
    width: 3rem;
    height: 0.8rem;
    border: 0;
}
</style>


